<script setup lang="ts">
import { computed } from 'vue'
import {getSvg} from "@/assets/getFlies.ts";
const props = defineProps({
    showMenu: {
        type: Boolean,
        default: true
    },
    height: {
        type: Number,
        default: 60
    }
});

const emits = defineEmits(['changeMenu'])

const setHeight = computed(() => {
    return  `${props.height}px`
})
const iconsDirection = computed(() => {
    return props.showMenu ? 'rotate-0' : 'rotate-180'
})

const changeShowMen = () => {
    emits('changeMenu', !props.showMenu)
}
</script>

<template>
    <div class="bew_box px-4 relative" :style="{height: setHeight}">
        <div class="absolute h-full left-0 top-0 col_box_center cursor-pointer" @click="changeShowMen">
          <img :src="getSvg('left_start')" alt="" class="w-6 text-red-400" :class="[iconsDirection]">
        </div>
        <!-- logo -->
        <div class="f">
<!--            <img :src="getSvg('vue')" alt="logo" class="h-8"/>-->
        </div>
    </div>
</template>

<style scoped>
</style>